<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

<!--    使用v-else-if的方法-->
    <h2 v-if="score >= 90">优秀</h2>
    <h2 v-else-if="score >= 80">良好</h2>
    <h2 v-else-if="score >= 60">及格</h2>
    <h2 v-else>不及格</h2>

<!--    使用计算属性的方法-->
    <h1>{{result}}</h1>
</div>

<script src="../../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score: 99
        },
        computed: {
            result() {
                let showMessage = '';
                if (this.score >= 90){
                    showMessage = '优秀'
                }else if (this.score >= 80){
                    showMessage = '良好'
                }else if (this.score >= 60){
                    showMessage = '及格'
                }else {
                    showMessage = '不及格'
                }
                return showMessage
            }
        }
    })
</script>

</body>
</html>